<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="addFn(null,'添加权限')">添加权限</el-button>
      </el-row>
      <br>
      <el-card class="box-card">

        <el-table
          height="calc(100vh - 247px)"
          border
          style="width: 100%"
          :data="tableData"
          row-key="id"
          :tree-props="{children: 'children'}"
        >
          <!-- el-table-column：该组件表示表格的列
              label: 值即为显示在表格中表头的标题
              prop: 值对应就是表格内容的属性名
              type: 值为index的时候表示该列表显示序号 -->
          <!-- <el-table-column label="序号" width="180" type="index" /> -->
          <!-- 利用作用域插槽自定义序号这一列的内容 -->
          <el-table-column label="权限名称" width="220" prop="title" align="left">
            <!-- <template v-slot="{row}">{{ row.title }}</template> -->
          </el-table-column>
          <el-table-column prop="code" label="权限标识" width="220" align="center" />
          <!-- 当列的宽度没有设置的时候，则该列的宽度会自适应 -->
          <el-table-column prop="description" label="权限描述" width="220" align="center" />
          <el-table-column label="操作" align="center">
            <template v-slot="{row}">
              <el-button size="small" type="success" @click="addFn(row.id,'添加子权限')">添加子权限</el-button>
              <el-button size="small" type="primary" @click="addFn(row.id,'编辑')">编辑</el-button>
              <el-button size="small" type="danger" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <FenYeQi :total="total" :page.sync="page" :size.sync="size" @handleChange="handleChange" />
      </el-card>

      <!-- 权限弹窗 -->
      <!-- 放置一个弹层 用来编辑新增节点 -->
      <el-dialog :title="headline" :visible="showDialog" @close="closeFn">
        <!-- 表单 -->
        <el-form ref="perForm" label-width="120px" :rules="reles" :model="formData">
          <el-form-item label="权限标题" prop="title">
            <el-input v-model="formData.title" style="width:90%" />
          </el-form-item>
          <el-form-item label="权限标识" prop="code">
            <el-input v-model="formData.code" style="width:90%" />
          </el-form-item>
          <el-form-item label="权限描述" prop="description">
            <el-input v-model="formData.description" style="width:90%" />
          </el-form-item>
        </el-form>
        <el-row slot="footer" type="flex" justify="center">
          <el-col :span="6">
            <el-button size="small" type="primary" @click="confirmFn">确定</el-button>
            <el-button size="small" @click="closeFn">取消</el-button>
          </el-col>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getPermissions, postPermissions, getPermissionsId, putProperties, delPermissions, getPermissionsCount } from '@/api/quanxian'
import { listToTree } from '@/utils/index'
export default {
  data() {
    return {
      activeName: 'role', // 默认选中当前页
      size: 8,
      page: 1,
      total: 0,
      tableData: [], // 权限列表
      showDialog: false, // 弹窗显示隐藏
      formData: {
        title: '',
        code: '',
        description: ''
      },
      id: '',
      reles: {},
      headline: ''
    }
  },
  async created() {
    await this.getPermissions(this.size, this.page)
    this.total = await getPermissionsCount()
  },
  mounted() {

  },
  methods: {
    // 删除权限
    async delFn(id) {
      if (confirm('确定删除么宝')) {
        await delPermissions(id)
        this.$message.success('删除成功')
      }
      this.getPermissions(this.size, this.page)
      this.closeFn()
    },
    // 编辑
    // editfn() {
    //   this.showDialog = true
    //   this.headline
    // },
    // 添加子权限
    async addFn(id, val) {
      this.showDialog = true
      this.headline = val
      this.id = id
      if (this.headline === '编辑') {
        const res = await getPermissionsId(id)
        this.formData = res
      }
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    // 关闭弹窗
    closeFn() {
      this.showDialog = false
      this.$refs.perForm.resetFields()
    },
    // 弹窗确认按钮
    async confirmFn() {
      if (this.headline === '添加子权限') {
        await postPermissions({ ...this.formData, pid: this.id.toString(), type: '2' })
        this.$message.success('添加成功')
      } else if (this.headline === '添加权限') {
        await postPermissions({ ...this.formData, pid: '0', type: '1' })
        this.$message.success('添加成功')
      } else {
        await putProperties({ ...this.formData, pid: '0', type: '1' })
        this.$message.success('修改成功')
      }
      this.getPermissions(this.size, this.page)
      this.closeFn()
    },
    // 权限列表封装
    async getPermissions(size, page) {
      const res = await getPermissions(size, size * (page - 1))
      // this.tableData = res
      this.tableData = listToTree(res, '0')
      console.log(43, this.tableData)
    },
    // 分页器
    async handleChange() {
      await this.getPermissions(this.size, this.page)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
